@extends('layout')
@section('css')
<link rel="stylesheet" href="{{URL::asset('css/help.css')}}">
@endsection
@section('content')
<div class="banner">
    <img src="{{URL::asset('img/banner.png')}}" width="100%">
</div>
<div class="helpBox">
    <div class="row">
        <div class="col-xs-2 user">
            <img src="{{URL::asset('img/redPicket.png')}}" alt="" width="100%" class="userPortrait">
            <div class="userName">{{$detail['user']}}</div>
        </div>
        <div class="col-xs-10 commentBox">
            <div class="comment">
                <div>我还差“{{$detail['couplet_name']}}”这个春联即可打开888红包快帮我点亮嘛~</div>
                <div>你要来跟我一起参加赢取大奖吗？</div>
            </div>
        </div>
    </div>
    <div class="progressBox">
        <div class="dot"></div>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: {{$amount/60*100}}%;">
            </div>
        </div>
        <img src="{{URL::asset('img/coupletIcon.png')}}" alt="" class="coupletIcon">
    </div>
    @if($detail['status']==1)
    <div class="havelight">
        恭喜！已成功点亮
    </div>
    @else
    <div class="detail">还需
        <span class="num">
            @if(60-$amount<0)
            0
            @else
            {{60-$amount}}
            @endif
        </span>
    亮度，TA即可获得春联</div>
    @endif
    <div class="helpHim" data-id="{{$detail['id']}}" data-couplet="{{$detail['couplet_id']}}"><img src="{{URL::asset('img/nolight.png')}}" alt="" width="100%"></div>
    <div class="haveHelp hidden"><img src="{{URL::asset('img/lighted.png')}}" alt="" width="100%"></div>
    <div class="joinIn"><img src="{{URL::asset('img/joinin.png')}}" alt="" width="100%"></div>
</div>
<div>
    <div class="hadHelp">已经{{$count}}有位朋友，为TA助力点亮春联</div>
    <div class="otherBigBox">
        @foreach($detail['other'] as $value)
        @if(!empty($value['other_id']))
        <div class="otherBox row">
            <div class="col-xs-2"><img src="{{$value['img']}}" alt="" class="otherPortrait"></div>
            <div class="col-xs-6">
                <div class="otherName">{{$value['name']}}</div>
                <div class="otherDate">{{$value['other_time']}}</div>
            </div>
            <div class="otherLightNum col-xs-4">
                +{{$value['other_num']}}亮度
            </div>
        </div>
        @endif
        @endforeach
    </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="phoneModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="form-group">
                    <label for="phone">输入手机号</label>
                    <input type="tel" class="form-control" id="phone" placeholder="请输入手机号">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="sure">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="prompt">
    <div class="modal-dialog" role="document">
        <div class="background">
            <div class="title"></div>
            <div class="text"></div>
            <div>
                <div class="sure" data-dismiss="modal">好的!</div>
            </div>
        </div>
    </div>
</div>
@endsection
{{--  <div class="light">
    点亮
</div>  --}}
@section('script')
<script>
    $('.helpHim').on('click',function(){
        var id = $(this).data('id');
        var couplet_id = $(this).data('couplet');
        $.ajax({
            url:'/help_action',
            data:{'help_id':id,'openid':"{{$openid}}",'u_id':123,'couplet_id':couplet_id},
            dataType:'JSON',
            type:'post',
            success:function(data){
                if(data.code==200){
                    $('#prompt').modal('show');
                    $('#prompt .title').text('恭喜您');
                    $('#prompt .text').text('您成功帮TA点亮了');
                }else{
                    $('#prompt').modal('show');
                    $('#prompt .title').text('温馨提示');
                    $('#prompt .text').text(data.msg);
                }
            }
        });
    });
    $(document).ready(function(){
        $.ajax({
            url:'/getJoin',
            data:{'help_id':"{{$detail['id']}}",'openid':"{{$openid}}"},
            dataType:'JSON',
            type:'get',
            success:function(data){
                if(data.code==201){
                    $('.helpHim').addClass('hidden');
                    $('.haveHelp').removeClass('hidden');
                }
            }
        });
    });
    $('.joinIn').on('click',function(){
        $('#phoneModal').modal('show');
        //location.href = 'https://app.hxsapp.com/hxsweb/signUpPage';
    });
    $('#phoneModal').on('click','#sure',function(){
        var phone = $('#phone').val();
        $.ajax({
            url:'/getUserId',
            data:{'phone':phone},
            dataType:'JSON',
            type:'POST',
            success:function(data){
                if(data.data==0){
                    location.href='https://app.hxsapp.com/hxsweb/signUpPageAct?jump_url=http://hxsh5.fsgit.cn/couplet';
                }else{
                   location.href='/couplet?user_id='+data.data;
                }
            }
        });
    });
</script>
@endsection